<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.min.js"></script>
</head>
<body>
<div id="root"> </div>
<script>
    const root = ReactDOM.createRoot(document.querySelector('#root'));
    //const root2 = ReactDOM.createRoot(document.querySelector('#root'));
    // 1. dom容器和react的根节点需要时一一对应的
    //root1.render(
    //    '第一次渲染'
    //);
    // 2. render 可以重复调用 后面会覆盖掉前面的
    //root2.render(
    //   '第二次渲染'
    //);
    // 3. 根节点不要使用body和html
    /*
    * 传统的JS操作DOM 会有一个弊端,会导致大量的重拍和重绘
    * 效率较低
    *
    *  虚拟DOM
    *   1.本质就是一个对象, 属性较少(9个属性)
    *   2.虚拟DOM有的属性和真是DOM的属性是一一对应的
    *   3.虚拟DOM 通过Render 可以转换为真实DOM
    *   4.在React中, 也管虚拟DOM 叫React元素
    *       ①React.createElement
    *       ②jsx 创建
    *   5. 创建的元素没有属性
    * */
    const oDiv = React.createElement('div',{id: 'box',school:'前端小王子',className:'xxx'},'我是DIV','我真的是DIV');
    console.log('oDiv',oDiv);
    root.render(oDiv);
    
    //const oSpan = React.createElement('span',{},'我是Span');
    //root.render(oSpan);


</script>
</body>
</html>